<template>
  <div>
    <div id="navbar">
      <div class="lww_header">
        <div class="header_wrap">
          <div class="header_logo">
            <a class="lww_logo"></a>
          </div>
          <ul class="header_nav">
            <li
              name="index"
              :class="this.$route.path === '/' ? 'header_nav_active' : ''"
              @click="
                () => {
                  this.$router.push('/');
                }
              "
            >
              <a>首页</a>
            </li>
            <li
              :class="
                this.$route.path === '/destination' ? 'header_nav_active' : ''
              "
              name="destination"
              @click="
                () => {
                  this.$router.push('/destination');
                }
              "
            >
              <a>目的地</a>
            </li>
            <li name="strategy">
              <a>旅游攻略</a>
            </li>
            <li name="travel"><a>旅游日记</a></li>
            <li name="">
              <a>去旅行<i class="icon_caret_down"></i></a>
            </li>
            <li name="">
              <a>社区<i class="icon_caret_down"></i></a>
            </li>
          </ul>
          <div class="header_search">
            <input type="text" />
            <a class="icon_search"></a>
          </div>
          <div class="login_info" v-if="isLogin">
            <div class="head_user">
              <a>
                <img
                  src="../assets/images/default.jpg"
                  id="login_user_headUrl"
                />
                <i class="icon_caret_down"></i>
                <span @click="outLogin">退出登录</span>
              </a>
            </div>
            <div class="header_msg">消息<i class="icon_caret_down"></i></div>
            <div class="header_daka">
              <a>打卡</a>
            </div>
          </div>
          <div class="login-out" v-else>
            <a class="weibo-login" title="微博登录" rel="nofollow"></a>
            <a class="qq-login" title="QQ登录" rel="nofollow"></a>
            <a class="weixin-login" title="微信登录" rel="nofollow"></a>
            <a
              id="_j_showlogin"
              title="登录骡窝窝"
              rel="nofollow"
              @click="
                () => {
                  this.$router.push('/login');
                }
              "
              >登录</a
            >
            <span class="split">|</span>
            <a
              title="注册帐号"
              rel="nofollow"
              @click="
                () => {
                  this.$router.push('/regist');
                }
              "
              >注册</a
            >
          </div>
        </div>
        <div class="shadow"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {};
  },
  created() {
    let token = this.token;
    // console.log(this.token);
    this.changeIslogin(Boolean(token));
  },
  computed: {
    ...mapState({
      isLogin: (state) => state.LoginStore.isLogin,
      token: (state) => state.LoginStore.token,
      // userInfo: (state) => state.LoginStore.userInfo,
    }),
  },
  methods: {
    ...mapMutations({
      outLogin: "LoginStore/outLogin",
      changeIslogin: "LoginStore/changeIslogin",
    }),
    outLoginFn() {
      localStorage.removeItem("token");
      this.$router.go(0);
      this.outLogin();
    },
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/base.css";
</style>
